import React, { useState, useEffect } from 'react';
import { TextareaItem, Button, Toast, Modal } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
import { useLocation } from 'umi';
const footer = function(props: any) {
  const { houseStore } = props;

  const [show, setShow] = useState(false);
  const [commentsValue, setCommentsValue] = useState();
  const { query }: any = useLocation();

  const handleClick = () => {
    setShow(true);
  };

  const handleChange = (value: any) => {
    setCommentsValue(value);
  };

  const handleClose = () => {
    setShow(false);
  };

  const handleSubmit = () => {
    if (commentsValue) {
      handleClose();
      houseStore.addCommentsAsync({
        comment: commentsValue,
        houseId: query?.id,
      });
    } else {
      Toast.fail('请添加信息');
    }
  };

  return (
    <>
      <div className="footer" onClick={handleClick}>
        评论~
      </div>
      <Modal
        visible={show}
        popup={true}
        animationType="slide-up"
        onClose={handleClose}
      >
        <div className="modal-comment">
          <TextareaItem rows={2} count={200} onChange={handleChange} />
          <Button className="comment-btn" type="warning" onClick={handleSubmit}>
            评论
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default inject('houseStore')(observer(footer));
